<template>
  <div>
    <div>
      <el-button @click="showSelectActivities" icon="el-icon-search" type="primary" size="small"
        style="margin-bottom: 16px;">选择活动</el-button>
      <el-popconfirm title="这是确定批量删除吗？" @confirm="deleteMany()">
        <el-button style="margin-bottom: 15px" icon="el-icon-delete" size="small" type="danger" slot="reference"
          :disabled="delBtlStatus">批量删除</el-button>
      </el-popconfirm>

      <el-select v-model="deleteActivitiesId" placeholder="请选择活动" size="small" style="margin-left: 640px">
        <el-option v-for="item in optionActivitiesData" :key="item.activitiesId" :label="item.activityName"
          :value="item.activitiesId">
        </el-option>
      </el-select>
      <el-button @click="deleteActivitiesById" icon="el-icon-refresh-right" size="small" type="danger"
        style="margin-bottom: 16px;">撤回本次发布活动
      </el-button>
      <!-- <el-popconfirm title="这是确定批量删除吗？" @confirm="batchDelete">
        <el-button type="danger" slot="reference" size="small" icon="el-icon-delete" :disabled="delBtlStatus">批量删除
        </el-button>
      </el-popconfirm> -->
      <el-drawer title="选择活动发布!" :visible.sync="drawer" direction="btt" :before-close="handleClose" size="68%">
        <el-table border style="margin-left: 40px; width: 95%" fixed :data="drawerData">
          <el-table-column property="activityName" label="活动名称" width="120"></el-table-column>
          <el-table-column property="activityBeginTime" label="活动开始时间" width="160"></el-table-column>
          <el-table-column property="activityEndTime" label="活动结束时间" width="160"></el-table-column>
          <el-table-column property="totalPeoples" label="总人数" width="80"></el-table-column>
          <el-table-column property="leader" label="负责人" width="80"></el-table-column>
          <el-table-column property="leaderPhone" label="负责人电话" width="100"></el-table-column>
          <el-table-column property="beSampleUnits" label="被采样单位" width="100"></el-table-column>
          <el-table-column property="beSampleUnitsName" label="被采样单位负责人" width="160"></el-table-column>
          <el-table-column property="beSampleUnitsPhone" label="被采样单位负责人电话" width="160"></el-table-column>
          <el-table-column property="sampleUnits" label="采样单位" width="160"></el-table-column>
          <el-table-column property="sampleUnitsName" label="采样单位负责人" width="100"></el-table-column>
          <el-table-column property="sampleUnitsPhone" label="采样单位负责人电话" width="160"></el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <div style="margin-bottom: 10px">
                <el-button type="primary" size="small" icon="el-icon-circle-plus"
                  @click="showCommitView(scope.$index, scope.row)">发布不可预约活动</el-button>
              </div>
              <div>
                <el-button type="success" icon="el-icon-circle-plus" size="small"
                  @click="showCommitViewOrder(scope.$index, scope.row)">发布可以预约活动</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </div>
    <div>
      <el-table @selection-change="handleSelectionChange" :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="40">
        </el-table-column>
        <el-table-column fixed label="序号" align="center" type="index" :index="indexAdd" width="60">
        </el-table-column>
        <el-table-column fixed prop="tblActivities.activityName" align="center" label="活动名称" width="120">
        </el-table-column>
        <el-table-column prop="tblActivities.beSampleUnits" align="center" label="被采样单位" width="120">
        </el-table-column>
        <el-table-column prop="tblActivities.sampleUnits" align="center" label="采样单位" width="120">
        </el-table-column>
        <el-table-column prop="sampleBeginTime" align="center" label="采样开始时间段" width="160">
        </el-table-column>
        <el-table-column prop="sampleEndTime" align="center" label="采样结束时间段" width="160">
        </el-table-column>
        <el-table-column prop="tblUnits.name" align="center" label="单位地点" width="170">
        </el-table-column>
        <el-table-column prop="tblSampleAddress.addressName" align="center" label="采样地点" width="210">
        </el-table-column>
        <el-table-column prop="tblActivitiesAddress.addressNumber" align="center" label="窗口号" width="80">
        </el-table-column>
        <el-table-column prop="peoples" align="center" label="可预约人数" width="100">
        </el-table-column>
        <el-table-column prop="orderedPeoples" align="center" label="已预约人数" width="100">
        </el-table-column>
        <el-table-column prop="orderStatus" align="center" label="可否预约" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderStatus === 0" type="info">不可预约</el-tag>
            <el-tag v-else-if="scope.row.orderStatus === 1" type="success">可预约</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="limitPage">
      <el-pagination style="margin-top: 16px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.currentPage" :page-sizes="pageSizes" :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
    <div>
      <el-dialog title="设置窗口数量" :visible.sync="dialogFormVisible1" width="40%">
        <el-form :model="formWindowData">
          <el-form-item label="活动区域" label-width="100px">
            <el-select v-model="formWindowData.addressId" placeholder="请选择活动区域">
              <el-option v-for="item in optionAddressData" :key="item.addressId" :label="item.addressName"
                :value="item.addressId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="窗口数量" label-width="100px">
            <el-input size="small" style="width: 200px" v-model="formWindowData.addressNumber" placeholder="请输入窗口数量">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button style="position: relative;float: left" size="small" type="success" @click="completeSet">下一步
          </el-button>
          <el-button size="small" @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button size="small" type="primary" @click="setAddressNumber">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="设置活动发布信息" :visible.sync="dialogFormVisible2" width="40%">
        <div style="margin-bottom: 20px">
          <el-radio v-model="radio1" label="1">手动分配</el-radio>
          <el-radio v-model="radio1" label="2">自动分配</el-radio>
        </div>
        <el-form label-position="right" label-width="80px" :model="formLabelAlign" v-if="radio1 === '1'">
          <el-form-item label="选择地点">
            <el-select v-model="DistributeActivitiesData.unitsId" @change="selectUnitsAcademy($event)"
              placeholder="请选择活动地点">
              <el-option v-for="item in optionSchoolData" :key="item.unitsId" :label="item.name" :value="item.unitsId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人数">
            <el-input v-model="DistributeActivitiesData.peoples" placeholder="设置每个窗口容纳人数"></el-input>
          </el-form-item>
          <el-form-item label="采样地点">
            <el-select v-model="DistributeActivitiesData.addressId" placeholder="请选择采样地点">
              <el-option v-for="item in SampleAddressData" :key="item.addressId" :label="item.addressName"
                :value="item.addressId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采样学院">
            <el-checkbox-group v-model="DistributeActivitiesData.unitsIds" @change="logcom($event)">
              <el-checkbox v-for="item in selectUnitsAcademy1" :label="item.unitsId" :key="item.unitsId">{{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="间隔时间">
            <el-input v-model="DistributeActivitiesData.intervalTime" placeholder="设置间隔时间(分钟)"></el-input>
          </el-form-item>
        </el-form>
        <el-form label-position="right" label-width="80px" :model="SelectActivities" v-else-if="radio1 === '2'">
          <el-form-item label="选择地点">
            <el-select v-model="SelectActivities.unitsId" @change="selectUnitsAcademy($event)" placeholder="请选择活动地点">
              <el-option v-for="item in optionSchoolData" :key="item.unitsId" :label="item.name" :value="item.unitsId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人数">
            <el-input v-model="SelectActivities.peoples" placeholder="设置每个窗口容纳人数"></el-input>
          </el-form-item>
          <el-form-item label="间隔时间">
            <el-input v-model="SelectActivities.intervalTime" placeholder="设置间隔时间(分钟)"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button style="position: relative;float: left" type="primary" size="small" @click="backLast">上一步
          </el-button>
          <el-button style="position: relative;float: left" size="small" type="success" @click="completeSet2">完成设置
          </el-button>
          <el-button size="small" @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button size="small" type="primary" @click="unitsDistributeActivities">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="设置窗口数量" :visible.sync="dialogFormVisible3" width="40%">
        <el-form :model="formWindowData">
          <el-form-item label="活动区域" label-width="100px">
            <el-select v-model="formWindowData.addressId" placeholder="请选择活动区域">
              <el-option v-for="item in optionAddressData" :key="item.addressId" :label="item.addressName"
                :value="item.addressId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="窗口数量" label-width="100px">
            <el-input size="small" style="width: 200px" v-model="formWindowData.addressNumber" placeholder="请输入窗口数量">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button style="position: relative;float: left" size="small" type="success" @click="completeSet3">下一步
          </el-button>
          <el-button size="small" @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button size="small" type="primary" @click="setAddressNumber">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="发布可以预约活动" :visible.sync="dialogFormVisible4" width="40%">
        <el-form label-position="right" label-width="80px" :model="SelectActivitiesOrder">
          <el-form-item label="选择地点">
            <el-select v-model="SelectActivitiesOrder.unitsId" @change="selectUnitsAcademy($event)"
              placeholder="请选择活动地点">
              <el-option v-for="item in optionSchoolData" :key="item.unitsId" :label="item.name" :value="item.unitsId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人数">
            <el-input v-model="SelectActivitiesOrder.peoples" placeholder="设置每个窗口容纳人数"></el-input>
          </el-form-item>
          <el-form-item label="间隔时间">
            <el-input v-model="SelectActivitiesOrder.intervalTime" placeholder="设置间隔时间(分钟)"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button style="position: relative;float: left" type="primary" size="small" @click="backLast2">上一步
          </el-button>
          <el-button style="position: relative;float: left" size="small" type="success" @click="completeSet4">完成设置
          </el-button>
          <el-button size="small" @click="dialogFormVisible4 = false">取 消</el-button>
          <el-button size="small" type="primary" @click="commitActivitiesOrder">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysActivityManageSchool.vue",
  data() {
    return {
      delBtlStatus: true,
      multipleSelection: [],
      deleteActivitiesId: '',
      optionActivitiesData: [],
      parentId: '',
      units: [],
      unitsPush: [],
      checked: false,
      trueLabel: false,
      activitiesId: '',
      DistributeActivitiesData: {
        activitiesId: '',
        unitsId: '',
        peoples: '',
        addressId: '',
        unitsIds: [],
        intervalTime: ''
      },
      SelectActivities: {
        activitiesId: '',
        unitsId: '',
        peoples: '',
        intervalTime: ''
      },
      SelectActivitiesOrder: {
        activitiesId: '',
        unitsId: '',
        peoples: '',
        intervalTime: ''
      },
      selectUnitsAcademy1: [],
      SampleAddressData: [],
      formLabelAlign: {},
      radio1: '1',
      //抽屉
      drawer: false,
      tableData: [],
      drawerData: [],
      optionSchoolData: [],
      optionAddressData: [],
      formWindowData: {
        activitiesId: '',
        addressId: '',
        addressNumber: ''
      },
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [4, 6, 8],
      page: {
        // 默认显示第几页
        currentPage: 1,
        // 默认每页显示的条数（可修改）
        pageSize: 6
      },
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      timer: '',
      beSampleUnitsId: JSON.parse(localStorage.getItem("userInfo")).unitsId
    }
  },
  mounted() {
    this.initBeSampleUnitsActivities();
    this.getHeldingEndList();
  },
  methods: {
    // 实现表格序号自增
    indexAdd(index) {
      return index + 1 + (this.page.currentPage - 1) * this.page.pageSize;
    },
    //返回上一步
    backLast() {
      this.dialogFormVisible2 = false;
      this.dialogFormVisible1 = true;
    },
    backLast2() {
      this.dialogFormVisible4 = false;
      this.dialogFormVisible3 = true;
    },
    logcom(e) {
      console.log(e)
      this.units = e;
    },
    //批量删除
    deleteMany() {
      var beSampleIds = []
      this.multipleSelection.forEach(row => {
        beSampleIds.push(row.beSampleId)
      })
      this.$axios.delete("/gmu/be-sample-units-activities/deleteActivitiesByIds/" + beSampleIds).then(res => {
        if (res.data.code === 200) {
          this.initBeSampleUnitsActivities();
        }
      })
    },
    //撤回误发活动
    deleteActivitiesById() {
      this.$confirm('是否撤回该活动发布，将会删除对应的采样记录以及预约记录和窗口记录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("/gmu/be-sample-units-activities/rollBackActivities/" + this.deleteActivitiesId).then(res => {
          if (res.data.code === 200) {
            this.initBeSampleUnitsActivities();
            this.getHeldingEndList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //获取进行中和结束活动列表
    getHeldingEndList() {
      this.$axios.get("/gmu/tbl-activities/getAllActivitiesNotByStatus/" + this.beSampleUnitsId)
        .then(res => {
          if (res.data.code === 200) {
            this.optionActivitiesData = res.data.data
          }
        })
    },
    completeSet2() {
      this.$confirm('是否完成本次活动发布，退出后将无法返回', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisible2 = false;
        this.updateActivitiesStatus();
        this.initBeSampleUnitsActivities();
        this.parentId = '';
        this.units = [];
        this.DistributeActivitiesData = {}
        this.SelectActivities = {}
        this.unitsPush = []
        // let timer = setTimeout(function () {
        //   console.log("刷新了")
        //   this.getAllActivitiesByStatus();
        // }, 2000)



      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    completeSet4() {
      this.$confirm('是否完成本次活动发布，退出后将无法返回', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateActivitiesStatus();
        this.dialogFormVisible4 = false;
        this.SelectActivitiesOrder = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    unitsDistributeActivities() {
      this.$confirm('确认信息填写无误', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.radio1 === '1') {
          this.$axios.post("/gmu/be-sample-units-activities/unitsDistributeActivities/" +
            this.DistributeActivitiesData.activitiesId + "/" +
            this.DistributeActivitiesData.unitsId + "/" +
            this.DistributeActivitiesData.peoples + "/" +
            this.DistributeActivitiesData.addressId + "/" +
            this.DistributeActivitiesData.unitsIds + "/" +
            this.DistributeActivitiesData.intervalTime).then(res => {
              if (res.data.code === 200) {
                this.DistributeActivitiesData.unitsIds = []
                this.selectUnitsAcademy(this.parentId);
              }
            })
        } else if (this.radio1 === '2') {
          this.$axios.post("/gmu/be-sample-units-activities/unitsSelectActivities/" +
            this.SelectActivities.activitiesId + "/" +
            this.SelectActivities.unitsId + "/" +
            this.SelectActivities.peoples + "/" +
            this.SelectActivities.intervalTime).then(res => {
              if (res.data.code === 200) {
                this.SelectActivities = {}
              }
            })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    commitActivitiesOrder() {
      this.$confirm('确认信息填写无误', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/gmu/be-sample-units-activities/unitsSelectActivitiesOrder/" +
          this.SelectActivitiesOrder.activitiesId + "/" +
          this.SelectActivitiesOrder.unitsId + "/" +
          this.SelectActivitiesOrder.peoples + "/" +
          this.SelectActivitiesOrder.intervalTime).then(res => {
            if (res.data.code === 200) {
              this.SelectActivitiesOrder = {}
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

    selectUnitsAcademy(e) {
      this.$axios.get("/gmu/tbl-units/getUnitsByParentId/" + e).then(res => {
        if (res.data.code === 200) {
          this.selectUnitsAcademy1 = res.data.data;
          //添加上一次的选项
          for (let i = 0; i < this.unitsPush.length; i++) {
            this.units.push(this.unitsPush[i]);
          }
          //过滤已选项
          this.units.forEach(id => {
            for (let i = 0; i < this.selectUnitsAcademy1.length; i++) {
              if (this.selectUnitsAcademy1[i].unitsId === id) {
                this.selectUnitsAcademy1.splice(i, 1);
              }
            }
          });
          //记录上一次的选项
          this.unitsPush = this.units;

          this.parentId = e;
        }
      })
    },
    //完成设置后将活动状态转为举行中
    updateActivitiesStatus() {
      this.$axios.put("/gmu/be-sample-units-activities/updateActivitiesStatus/" + this.activitiesId).then(res => {
        if (res.data.code === 200) {
          this.getAllActivitiesByStatus();
        }
      })
    },
    getSampleAddressByActivitiesId() {
      this.$axios.get("/gmu/be-sample-units-activities/showReservationAddress/" + this.activitiesId).then(res => {
        if (res.data.code === 200) {
          this.SampleAddressData = res.data.data;
        }
      })
    },
    getSchoolByParentId(data) {
      this.$axios.get("/gmu/tbl-units/getUnitsByParentId/" + data.beSampleUnitsId).then(res => {
        if (res.data.code === 200) {
          this.optionSchoolData = res.data.data;
        }
      })
    },
    completeSet() {
      this.getSampleAddressByActivitiesId();
      this.dialogFormVisible1 = false;
      this.dialogFormVisible2 = true;
    },
    completeSet3() {
      this.dialogFormVisible3 = false;
      this.dialogFormVisible4 = true;
    },
    setAddressNumber() {
      this.$axios.post("/gmu/tbl-activities-address/setAddressNumber/" +
        this.formWindowData.activitiesId + "/" +
        this.formWindowData.addressId + "/" +
        this.formWindowData.addressNumber).then(res => {
          if (res.data.code === 200) {

          }
        })
    },
    showCommitView(index, data) {
      this.dialogFormVisible1 = true;
      this.DistributeActivitiesData.activitiesId = data.activitiesId;
      this.SelectActivities.activitiesId = data.activitiesId;
      this.formWindowData.activitiesId = data.activitiesId;
      this.activitiesId = data.activitiesId;
      this.getSchoolByParentId(data);
      this.getSampleAddressByUnitsId(data);
    },
    showCommitViewOrder(index, data) {
      this.dialogFormVisible3 = true;
      this.formWindowData.activitiesId = data.activitiesId;
      this.SelectActivitiesOrder.activitiesId = data.activitiesId;
      this.activitiesId = data.activitiesId;
      this.getSchoolByParentId(data);
      this.getSampleAddressByUnitsId(data);
    },
    getSampleAddressByUnitsId(data) {
      this.$axios.get("/gmu/tbl-sample-address/getSampleAddressByUnitsId/" + data.beSampleUnitsId).then(res => {
        if (res.data.code === 200) {
          this.optionAddressData = res.data.data;
        }
      })
    },
    showSelectActivities() {
      this.drawer = true;
      this.getAllActivitiesByStatus();
    },
    getAllActivitiesByStatus() {
      this.$axios.get("/gmu/tbl-activities/getAllActivitiesByStatus/" + this.beSampleUnitsId).then(res => {
        this.drawerData = res.data.data;
      })
    },
    initBeSampleUnitsActivities() {
      this.$axios.post("/gmu/be-sample-units-activities/getAllBeSampleActivities/" + this.beSampleUnitsId, this.page).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.beSampleActivities;
          this.totalCount = res.data.data.total;
        }
      })
    },
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.page.pageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.initBeSampleUnitsActivities();
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.page.currentPage = 1;
    },
    handleCurrentChange(val) {
      console.log(val)
      // 改变默认的页数
      this.page.currentPage = val;
      // 切换页码时，要获取每页显示的条数
      this.initBeSampleUnitsActivities();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.delBtlStatus = val.length == 0;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
}
</script>

<style scoped>
</style>
